<template>
	<view>
		<NavBar :isBack='true' :isRbtn='false' :title='title' @onRight="handRight"></NavBar>
		<image src="https://gfgn.oss-cn-beijing.aliyuncs.com/temp/vipBj_1731650616085.png" class="vipBj"></image>
		<view class="container">
			<view class="vipBox">
				<image src="https://gfgn.oss-cn-beijing.aliyuncs.com/temp/vipDayBj_1731650816560.png" class="vipDayBj">
				</image>
				<view style="position: absolute;top: 0;">
					<image src="../../static/info/vipText.png" class="vipText"></image>
					<view class="exclusiveText">专享分佣比例 | 专属会员</view>
					<view class="flex center">
						<image :src="buildImgUrl(avatar)" class="vipAvatar"></image>
						<view>剩余{{detail.defDays||0}}天</view>
					</view>
				</view>
			</view>
			<!-- <image src="../../static/info/308.png" class="vipYellow"></image> -->
			<!-- 			<view class="exclusiveBox">
				<image src="../../static/info/vipPrivilege.png" class="vipPrivilege"></image>
				<view class="flex center exclusiveList">
					<view class="flex center" style="flex-direction: column;">
						<image src="../../static/info/star.png" class="star"></image>
						<view>身份勋章</view>
					</view>
					<view class="flex center" style="flex-direction: column;">
						<image src="../../static/info/vipMoney.png" class="vipMoney"></image>
						<view>专属分佣</view>
					</view>
				</view>
			</view> -->
			<view class="exclusiveBox">
				<image src="../../static/info/381.png" class="vipPrivilege"></image>
				<view class="flex center exclusiveList">
					<view class="flex center" style="flex-direction: column;" @click="customerservice">
						<image src="../../static/info/378.png" class="star"></image>
						<view>添加客服领会员</view>
						<view class="centertxt"> 首次添加微信客服领取 15 天</view>
					</view>
					<view class="flex center" style="flex-direction: column;" @click="exchange">
						<image src="../../static/info/379.png" class="vipMoney"></image>
						<view>签到领会员</view>
						<view class="centertxt">签到领取积分兑换会员</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		myVipId,
		indexKateList
	} from '../../common/api.js'
	import NavBar from "../../components/NavBar.vue"
	import {
		buildImgUrl
	} from "../../utils/me.js";
	export default {
		components: {
			NavBar,
		},
		data() {
			return {
				buildImgUrl,
				title: '我的会员',
				detail: {},
				avatar: uni.getStorageSync('userInfo').avatar,
				menuList: [],
				codeimg: ''
			}
		},
		onShow() {
			this.myVipId()
			this.indexKateList()
		},
		methods: {
			customerservice() {
				uni.setStorageSync('innerCover', this.codeimg)
				uni.navigateTo({

					url: '/pages/index/addGroup?type=' + '1' 
				})
			},
			indexKateList() {
				indexKateList().then(res => {
					// this.menuList = res.result.slice(0, 8)
					this.codeimg = res.result[7].innerCover
					
				})
			},
			exchange() {
				uni.navigateTo({
					url: '/pages/info/signDay'
				})
			},
			myVipId() {
				myVipId(uni.getStorageSync('userInfo').id).then(res => {
					// this.$toast(res.message)
					this.detail = res.result
				})
			}
		}
	}
</script>

<style scoped>
	.centertxt {
		color: #999999;
		text-align: center;
		font-size: 24rpx;
		font-weight: 400;
	}

	.vipYellow {
		width: 538rpx;
		height: 72rpx;
		margin: 0 106rpx 0;
	}

	.vipMoney {
		width: 120rpx;
		height: 128rpx;
	}

	.star {
		width: 110rpx;
		height: 118rpx;
	}

	.exclusiveList {
		width: 590rpx;
		height: 384rpx;
		position: absolute;
		top: 0;
		justify-content: space-around;
		align-items: center;
		padding: 0 80rpx;
	}

	.exclusiveLista {
		width: 590rpx;
		height: 412rpx;
		position: absolute;
		top: 30rpx;
		justify-content: space-around;
		align-items: center;
		padding: 0 80rpx;
	}

	.vipPrivilege {
		width: 750rpx;
		height: 412rpx;
	}

	.exclusiveBox {
		position: relative;
		width: 750rpx;
		height: 412rpx;
		color: #333333;
		font-size: 24rpx;
		font-weight: 700;
		line-height: 72rpx;
	}

	.vipAvatar {
		width: 64rpx;
		height: 64rpx;
		margin: 0 22rpx 0 80rpx;
		border-radius: 50%;
	}

	.exclusiveText {
		color: #ffb46e;
		font-size: 28rpx;
		font-weight: 700;
		line-height: 72rpx;
		margin-left: 80rpx;
		margin-bottom: 16rpx;
	}

	.vipText {
		width: 134rpx;
		height: 72rpx;
		margin: 80rpx 80rpx 0 80rpx;
	}

	.vipBox {
		width: 750rpx;
		height: 448rpx;
		position: relative;
		color: #333333;
		font-size: 24rpx;
		font-weight: 700;
		line-height: 72rpx;
	}

	.vipDayBj {
		width: 750rpx;
		height: 448rpx;
	}

	.container {
		position: absolute;
		top: 102rpx;
		left: 0;
	}

	.vipBj {
		width: 100%;
	}
</style>
<style>
	page {
		background: #f4f5f9;
	}
</style>